<script setup lang="ts">
  import { ElSubMenu } from 'element-plus'
  import { SIcon, SAnimateCss } from '@xtail/vue3'
  import { StrUtil } from '@xtail/core'
  import { MenuTypeConst } from '../../common'
  import { MenuItemGroupPropsType, XMenuItemGroup } from '../XMenuItemGroup'
  import { MenuItemPropsType, XMenuItem } from '../XMenuItem'
  import { SubMenuPropsType } from './types'

  defineOptions({
    name: 'XSubMenu'
  })

  withDefaults(defineProps<SubMenuPropsType>(), {
    index: '',
    icon: SIcon,
    title: '',
    collapse: false,
    labelAnimateProps: {} as any,
    children: [] as any
  })
</script>

<template>
  <el-sub-menu
    class="x-sub-menu"
    :index="index"
    :popper-class="popperClass"
    :show-timeout="showTimeout"
    :hide-timeout="hideTimeout"
    :disabled="disabled"
    :teleported="teleported"
    :popper-offset="popperOffset"
    :expand-close-icon="expandCloseIcon"
    :expand-open-icon="expandOpenIcon"
    :collapse-close-icon="collapseCloseIcon"
    :collapse-open-icon="collapseOpenIcon"
  >
    <template #title>
      <s-animate-css v-if="!collapse" class="x-sub-menu__label" v-bind="labelAnimateProps">
        <slot name="icon" :icon="icon" :icon-props="iconProps">
          <component :is="icon" v-if="icon" class="x-sub-menu__label__icon" v-bind="iconProps" />
        </slot>
        <slot name="title" :title="title">
          <div
            class="x-menu-item__label__title"
            :class="[icon ? 'x-sub-menu__label__title-ml' : '']"
          >
            <div v-if="StrUtil.isStr(title)">{{ title }}</div>
            <component :is="title" v-else v-bind="titleProps" />
          </div>
        </slot>
      </s-animate-css>
      <s-animate-css v-else class="x-sub-menu__label" v-bind="labelAnimateProps">
        <slot name="icon" :icon="icon" :icon-props="iconProps">
          <component :is="icon" v-if="icon" class="x-sub-menu__label__icon" v-bind="iconProps" />
        </slot>
      </s-animate-css>
    </template>
    <template #default>
      <slot name="default">
        <template v-if="children.length > 0">
          <template v-for="(item, index) in children" :key="index">
            <x-sub-menu
              v-if="item.type === MenuTypeConst.SUB_MENU"
              v-bind="item as SubMenuPropsType"
            />
            <x-menu-item-group
              v-if="item.type === MenuTypeConst.MENU_ITEM_GROUP"
              v-bind="item as MenuItemGroupPropsType"
            />
            <x-menu-item
              v-if="item.type === MenuTypeConst.MENU_ITEM"
              v-bind="item as MenuItemPropsType"
            />
          </template>
        </template>
      </slot>
    </template>
  </el-sub-menu>
</template>

<style lang="scss">
  @use './style' as *;
</style>
